<template>
    <div>
        <div>
            <el-row :span="24" class="pt20">
                <el-col :span="24">
                    <el-form :inline="true" ref="form" :model="form" label-width="76px" class="demo-form-inline">
                        <el-form-item label="搜索员工:" prop="realname">
                            <el-input size="mini" placeholder="请输入员工姓名" v-model="form.realname"></el-input>
                        </el-form-item>
                        <el-form-item label="所在班级:" prop="class_id">
                            <el-select size="mini" v-model="form.class_id" placeholder="全部" filterable clearable>
                                <el-option v-for="item in classList" :key="item.id" :label="item.class_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search" size="mini">筛选</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <div class="table-wrap">
            <el-row class="pt20">
                <pers-button icon="" size="mini" @click="add()" perms="kanke:education:teacher:add" type="primary"
                    label="添加员工"></pers-button>
            </el-row>
            <el-table :data="tableData" :loading="loading" size="mini" style="width: 100%;margin-bottom: 20px;"
                row-key="id" border stripe default-expand-all>
                <el-table-column prop="realname" label="员工姓名" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="linkTeacherDetail(scope.row)"
                            v-if="hasPermission('kanke:education:teacher:detail')">
                            {{ scope.row.realname }}
                        </el-link>
                        <el-link type="primary" v-else>
                            {{ scope.row.realname }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="员工账号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="mobile" label="手机号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="role_name" label="角色" header-align="center" align="center"></el-table-column>
                <el-table-column prop="class_name" label="所在班级" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.class_name }}等
                        <el-link type="primary"> {{ scope.row.class_nums }} </el-link>
                        个班级
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column>
                <el-table-column prop="student_num" label="学员数" header-align="center" align="center"></el-table-column>
                <el-table-column prop="state" label="操作" header-align="center" align="center"
                    v-if="isShow(['kanke:education:teacher:reset-pwd', 'kanke:education:teacher:assign-classes', 'kanke:education:teacher:edit', 'kanke:education:teacher:del'])">
                    <template slot-scope="scope">
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                操作
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="{ command: 'resetPass', row: scope.row }"
                                    v-if="hasPermission('kanke:education:teacher:reset-pwd')">重置密码</el-dropdown-item>
                                <el-dropdown-item :command="{ command: 'allocate', row: scope.row }"
                                    v-if="hasPermission('kanke:education:teacher:assign-classes')">分配班级</el-dropdown-item>
                                <el-dropdown-item :command="{ command: 'edit', row: scope.row }"
                                    v-if="hasPermission('kanke:education:teacher:edit')">编辑</el-dropdown-item>
                                <el-dropdown-item :command="{ command: 'del', row: scope.row }"
                                    v-if="hasPermission('kanke:education:teacher:del')">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="form.total">
                </el-pagination>
            </div>
            <AssignClass v-if="showAssign" :visible.sync="showAssign" @handleReload="init()" :id="assignId" />
        </div>

        <!--弹出层  添加编辑-->
        <AddForm v-if="showForm" :visible.sync="showForm" @handleReload="init()" :id="formId" />
    </div>

</template>

<script>
import { hasPermission, isShow } from '@/common/permission';
import { allocate, del, resetPass, getTeacherList } from "@/api/kanke/teacher/teacher";
import { getClassData, isCanDel } from "@/api/kanke/gradeclass/gradeclass";
import AssignClass from './components/AssignClass.vue';
import AddForm from "@/views/kanke/education/teacher/components/AddForm";
let _that;

export default {
    name: 'Teacher',
    components: {
        AssignClass,
        AddForm
    },
    data() {
        return {
            loading: false,
            tableData: [],
            classList: [],
            form: {
                realname: '',
                class_id: '',
                pageSize: 10,
                pageNumber: 1,
            },
            openAdd: false,
            formAdd: {
                id: '',
                headimg_url: '',
                realname: '',
                account: '',
                role_id: 19,
                gender: 0,
                birthday: '',
                class_ids: [],
                class_names: [],
                readonly: false,
                roleList: [{ 'id': 19, 'role_name': '科目主管' }]
            },
            showAssign: false,
            assignId: 0,// 员工id
            formId: 0,
            showForm: false,  //编辑表单
            gotoDel: true
        }
    },
    created() {
        _that = this;
        _that.init(true);
        _that.getClassData();
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            _that.loading = true;
            // console.log('init', _that.form);
            getTeacherList(_that.form).then((res) => {
                console.log(res);
                _that.tableData = res.data.list;
                _that.form.total = res.data.total;
                _that.loading = false;
            })
        },
        search: function () {
            _that.loading = true;
            _that.form.pageSize = 10;
            _that.form.pageNumber = 1;
            _that.init();
        },
        handleSizeChange: function (e) {
            _that.form.pageSize = e;
            _that.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            _that.form.pageNumber = e;
            _that.init();
        },
        getClassData() {
            getClassData().then((res) => {
                console.log('classinfo', res);
                _that.classList = res.data.list;
            })
        },
        handleCommand(commandObj) {
            console.log('command info', commandObj);
            const { command, row } = commandObj;
            if (command == 'resetPass') this.resetPass(row);
            if (command == 'allocate') this.allocate(row);
            if (command == 'edit') this.edit(row);
            if (command == 'del') this.del(row);
        },
        resetPass(obj) {

            this.$confirm('请确定是否将密码重置为：888888 ', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                resetPass(obj).then((res) => {
                    console.log('resetinfo', res);
                    if (res.code == 200) {
                        this.$message({ type: 'success', message: '重置成功!' });
                    } else {
                        this.$message({ type: 'warning', message: res.msg });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        async del(obj) {
            //判断是否可以删除
            await isCanDel({ type: 1, teacher_id: obj.id }).then((res) => {
                if (res.code == 200) {
                    if (!res.data) {
                        this.$message({ type: 'error', message: '该老师已分配的班级里有学生且是唯一的老师，无法删除！' });
                        this.gotoDel = false;
                    }
                } else {
                    this.$message({ type: 'warning', message: res.msg });
                    this.gotoDel = false;
                }
            });
            if (!this.gotoDel) {
                return
            }
            this.$confirm('请确定是否将该员工删除\n' + '\n' + '此行为将不可恢复', '提示', {
            }).then(() => {

                del({ 'id': obj.id }).then((res) => {
                    console.log('teacherinfo', res);
                    if (res.code == 200) {
                        this.$message({ type: 'success', message: '删除成功!' });
                        this.init();
                    } else {
                        this.$message({ type: 'warning', message: res.msg });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        allocate(obj) {
            this.showAssign = true;
            this.assignId = obj.id;
        },
        edit(data) {
            this.showForm = true;
            this.formId = data.id;
        },
        add: function () {
            this.showForm = true;
            this.formId = 0;
        },
        linkTeacherDetail: function (data) {
            this.$router.push({ path: 'detail', query: { id: data.id } });
        },
    }
}


</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 300px;
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.round-image {
    width: 55px;
    /* 或者你想要的大小 */
    height: 45px;
    /* 和宽度相同 */
    border-radius: 50%;
    /* 使得图片变为圆形 */
    overflow: hidden;
    /* 超出容器的图片部分将被隐藏 */
}
</style>